<section class="view modelsList">

	<header
		class="navbar navbar-default navbar-fixed-top"
	>
		<div class="container">
			<div class="navbar-header pull-left">
				<strong class="navbar-brand">{{ 'BRMW' | translate }}</strong>
			</div><!-- End .navbar-header -->
			<div class="nav navbar-nav pull-right nav-icons">
				<dropdown-icon title="Options" options="$ctrl.dropdownOptions" on-select=$ctrl.menuOptionSelected(selected)></dropdown-icon>
			</div><!-- End .navbar-header -->
		</div>
	</header>

	<section class="mainContent">
		<header class="container">

			<aside class="feedback">
				<div
					class="alert"
					role="alert"
					data-ng-class="{
						'hide': !$ctrl.feedback.showing,
						'alert-danger': $ctrl.feedback.type=='error',
						'alert-success': $ctrl.feedback.type=='success',
						'alert-warning': $ctrl.feedback.type=='warning'
					}"
				>
					<p>{{ $ctrl.feedback.message }}</p>
				</div>
			</aside>

			<div class="page-header clearfix">
				<h2 class="h2 pull-left">{{ 'Models' | translate }}</h2>
				<aside class="header-actions pull-right">
					<a class="br-button" data-ng-click="$ctrl.newModel()"><i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'New model' | translate }}</a>
					<a class="br-button" data-ng-click="$ctrl.importModel()"><i class="fa fa-upload" aria-hidden="true"></i> {{ 'Import model' | translate }}</a>
				</aside>
			</div><!-- End .page-header -->
		</header><!-- End .container -->

		<div class="container projectsList">
			<img
				src="../../img/loading-dots.gif"
				alt="Loading"
				class="br-loader"
				ng-class="{'loading': $ctrl.loading}"
			/>
			<div class="table-responsive">
				<table class="table table-hover">
					<thead>
						<tr>
							<th><strong>{{ 'Type' | translate }}</strong></th>
							<th><strong>{{ 'Name' | translate }}</strong></th>
							<th><strong>{{ 'Author' | translate }}</strong></th>
							<th><strong>{{ 'Created' | translate }}</strong></th>
							<th colspan="1"><strong class="vhide actions-cell">{{ 'Actions' | translate }}</strong></th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="model in $ctrl.models" class="listLine">
							<td ng-click="$ctrl.openModel(model)">
								<icon-conceptual ng-if="model.type === 'conceptual'" aria-hidden="true"></icon-conceptual>
								<icon-logic ng-if="model.type === 'logic'" aria-hidden="true"></icon-logic>
								<span>{{model.typeName}}</span>
							</td>
							<td ng-click="$ctrl.openModel(model)">
								<i ng-if="model.shareOptions.active"  title="{{ 'Public link available' | translate }}" class="fa fa-share-alt share-status"></i>
								<span>{{model.name}}</span>
							</td>
							<td ng-click="$ctrl.openModel(model)">{{model.authorName}}</td>
							<td ng-click="$ctrl.openModel(model)">{{model.created | date:'dd/MM/yyyy'}}</td>
							<td class="actions-cell">
								<i title="{{ 'Rename' | translate }}" class="fa fa-pencil" ng-click="$ctrl.renameModel(model)"></i>
								<i title="{{ 'Duplicate' | translate }}" class="fa fa-files-o" ng-click="$ctrl.duplicateModel(model)"></i>
								<i title="{{ 'Share' | translate }}" class="fa fa-share-alt" ng-click="$ctrl.shareModel(model)"></i>
								<i title="{{ 'Delete' | translate }}" class="fa fa-trash" ng-click="$ctrl.deleteModel(model)"></i>
							</td>
						</tr>
					</tbody>
				</table>
			</div><!-- End .table-responsive -->
		</div><!-- End .container.projectsList -->

		<div class="container">
			<github-sponsor-banner></github-sponsor-banner>
		</div>
	</section><!-- End .mainContent -->
</section><!-- End .view -->